<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动监听</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link href="command/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
		<link href="command/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			body {
				position: relative;
			}

			ul.nav-pills {
				top: 20px;
				position: fixed;
			}

			div.col-sm-9 div {
				/* height: 250px; */
				font-size: 28px;
			}

			#section1 {
				color: #fff;
				background-color: #f58f98;
			}

			#section2 {
				color: #fff;
				background-color: #f391a9;
			}

			#section3 {
				color: #fff;
				background-color: #f3715c;
			}

			#section4 {
				color: #fff;
				background-color: #ffce7b;
			}

			@media screen and (max-width: 810px) {

				#section1,
				#section2,
				#section3,
				#section4 {
					margin-left: 150px;
				}
			}
		</style>
	</head>
	<body data-target="#myScrollspy"data-spy="scroll"  data-offset="20">
		<div class="container">
			<div class="row">
				<nav class="col-sm-3" id="myScrollspy">
					<div class="container-fluid">
						<div class="container-fluid">
							<ul class="nav nav-pills nav-stacked">
								<li class="active"><a href="#section1">历史</a></li>
								<li><a href="#section2">创立人资料</a></li>
								<li><a href="#section3">22222</a></li>
								<li><a href="#section4">66666</a></li>
							</ul>
						</div>
					</div>
				</nav>
				<div class="col-sm-9">
					<div id="section1">
						<h1>Section 1</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section2">
						<h1>Section 2</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section3">
						<h1>Section 3</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
					<div id="section4">
						<h1>Section 4</h1>
						<p>Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!
						Try to scroll this section and look at the navigation list while scrolling!</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
